<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人信息平台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0FC6C2',
                        dark: '#1D2129',
                        light: '#F2F3F5',
                        glass: 'rgba(255, 255, 255, 0.7)',
                        glassBlue: 'rgba(22, 93, 255, 0.15)',
                        glassDark: 'rgba(0, 0, 0, 0.05)'
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                    animation: {
                        'shake': 'shake 0.6s cubic-bezier(.36,.07,.19,.97) both',
                        'fade-in': 'fadeIn 0.3s ease-in-out',
                        'slide-up': 'slideUp 0.5s ease-out',
                        'float': 'float 3s ease-in-out infinite'
                    },
                    keyframes: {
                        shake: {
                            '0%, 100%': { transform: 'translateX(0)' },
                            '10%, 30%, 50%, 70%, 90%': { transform: 'translateX(-5px)' },
                            '20%, 40%, 60%, 80%': { transform: 'translateX(5px)' }
                        },
                        fadeIn: {
                            'from': { opacity: '0' },
                            'to': { opacity: '1' }
                        },
                        slideUp: {
                            'from': { transform: 'translateY(20px)', opacity: '0' },
                            'to': { transform: 'translateY(0)', opacity: '1' }
                        },
                        float: {
                            '0%, 100%': { transform: 'translateY(0)' },
                            '50%': { transform: 'translateY(-10px)' }
                        }
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .bg-gradient-custom {
                background: linear-gradient(135deg, #165DFF 0%, #0FC6C2 100%);
            }
            .bg-glass {
                background: rgba(255, 255, 255, 0.7);
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px);
            }
            .bg-glass-blue {
                background: linear-gradient(135deg, rgba(22, 93, 255, 0.1) 0%, rgba(15, 198, 194, 0.05) 100%);
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px);
            }
            .bg-glass-dark {
                background: rgba(0, 0, 0, 0.05);
                backdrop-filter: blur(5px);
                -webkit-backdrop-filter: blur(5px);
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }
            .card-shadow {
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
            }
            .input-focus {
                @apply focus:ring-2 focus:ring-primary/50 focus:border-primary;
            }
            .btn-hover {
                @apply hover:shadow-lg transform hover:-translate-y-0.5 transition-all duration-300;
            }
            .menu-item-hover {
                @apply hover:shadow-lg hover:bg-primary/5 transform hover:-translate-y-1 transition-all duration-300;
            }
            .cat-border {
                position: relative;
                overflow: hidden;
            }
            .cat-border::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 4px;
                background-image: url('https://picsum.photos/id/40/800/4');
                background-size: contain;
                background-repeat: repeat-x;
            }
        }
    </style>
</head>
<body class="font-inter bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen flex flex-col">
    <!-- 动画弹窗 -->
    <div id="animation-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-30 backdrop-blur-sm hidden">
        <div class="relative bg-white p-1 rounded-lg">
            <!-- 这里需要替换为你的动画链接 -->
            <img src="Cat Moving GIF.gif" alt="小毛跳舞动画" class="w-64 h-64">
            <button id="close-animation-modal" class="absolute -top-5 -right-2 text-gray-500 hover:text-gray-700">
                <i class="fa-solid fa-times"></i>
            </button>
        </div>
    </div>

    <!-- 背景装饰 -->
    <div class="fixed inset-0 -z-10 overflow-hidden">
        <div class="absolute top-20 left-10 w-64 h-64 bg-primary/10 rounded-full filter blur-3xl animate-float"></div>
        <div class="absolute bottom-20 right-10 w-80 h-80 bg-secondary/10 rounded-full filter blur-3xl animate-float" style="animation-delay: 1s;"></div>
        <div class="absolute top-1/2 left-1/3 w-72 h-72 bg-blue-200/20 rounded-full filter blur-3xl animate-float" style="animation-delay: 2s;"></div>
        <div id="light-source {transition: left 0.2s ease, top 0.2s ease;}" class="absolute w-80 h-800 bg-yellow-200/50 rounded-full filter blur-3xl"></div>
        
    </div>

    <!-- 导航栏 -->
    <nav class="bg-glass-blue shadow-sm sticky top-0 z-50 transition-all duration-300" id="navbar">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <div class="flex-shrink-0 flex items-center">
                        <i class="fa-solid fa-shield-keyhole text-primary text-2xl mr-2"></i>
                        <span class="font-bold text-xl text-dark">个人信息平台</span>
                    </div>
                </div>
                <div class="flex items-center">
                    <div class="hidden md:block">
                        <div class="ml-10 flex items-center space-x-4">
                            <a href="#home" class="text-gray-500 hover:text-primary px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200 nav-link">首页</a>
                            <a href="#contact" class="text-gray-500 hover:text-primary px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200 nav-link">联系我们</a>
                        </div>
                    </div>
                    <div class="md:hidden">
                        <button type="button" class="text-gray-500 hover:text-primary" id="mobile-menu-button">
                            <i class="fa-solid fa-bars text-xl"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 移动端菜单 -->
        <div class="md:hidden hidden" id="mobile-menu">
            <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-glass-blue">
                <a href="#home" class="text-gray-500 hover:text-primary block px-3 py-2 rounded-md text-base font-medium nav-link">首页</a>
                <a href="#contact" class="text-gray-500 hover:text-primary block px-3 py-2 rounded-md text-base font-medium nav-link">联系我们</a>
            </div>
        </div>
    </nav>

    <!-- 首页区域 -->
    <section id="home" class="flex-grow flex items-center justify-center p-4 sm:p-6 md:p-8 lg:p-10">
        <div class="w-full max-w-4xl">
            <!-- 登录前显示的内容 -->
            <div id="login-container" class="transition-all duration-500">
                <div class="text-center mb-10">
                    <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-dark mb-4 text-shadow">欢迎访问个人信息平台</h1>
                    <p class="text-gray-600 text-lg max-w-2xl mx-auto">此页面包含个人敏感信息，仅供授权人员访问。请输入您的用户名和密码以继续。</p>
                </div>

                <div class="max-w-md mx-auto bg-glass-blue rounded-2xl p-8 card-shadow transform transition-all duration-500 hover:shadow-xl">
                    <div class="text-center mb-6">
                        <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                            <i class="fa-solid fa-lock text-primary text-2xl"></i>
                        </div>
                        <h2 class="text-2xl font-bold text-dark">密码验证</h2>
                    </div>

                    <form id="login-form" class="space-y-4">
                        <div class="space-y-2">
                            <label for="username" class="block text-sm font-medium text-gray-700">用户名</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fa-solid fa-user text-gray-400"></i>
                                </div>
                                <input type="text" id="username" name="username" 
                                    class="block w-full pl-10 pr-10 py-3 border border-gray-300 rounded-lg shadow-sm input-focus outline-none transition-all duration-200"
                                    placeholder="请输入用户名" value="Denny" required>
                            </div>
                        </div>
                        <div class="space-y-2">
                            <label for="password" class="block text-sm font-medium text-gray-700">访问密码</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fa-solid fa-key text-gray-400"></i>
                                </div>
                                <input type="password" id="password" name="password" 
                                    class="block w-full pl-10 pr-10 py-3 border border-gray-300 rounded-lg shadow-sm input-focus outline-none transition-all duration-200"
                                    placeholder="请输入访问密码" value="" required>
                                <button type="button" id="toggle-password" class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 transition-colors duration-200">
                                    <i class="fa-regular fa-eye-slash"></i>
                                </button>
                            </div>
                        </div>

                        <div class="pt-2">
                            <button type="submit" id="login-button" 
                                class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg bg-primary text-base font-medium text-white bg-gradient-custom btn-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                                <span>验证访问权限</span>
                                <i class="fa-solid fa-arrow-right ml-2"></i>
                            </button>
                        </div>
                    </form>

                    <div class="mt-6 text-center text-sm text-gray-500">
                        <p>如有访问问题，请联系管理员获取帮助</p>
                    </div>
                </div>
            </div>

            <!-- 登录成功后显示的内容 -->
            <div id="success-container" class="hidden transition-all duration-500">
                <div class="text-center mb-8">
                    <div class="w-20 h-20 bg-secondary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fa-solid fa-user-shield text-secondary text-3xl"></i>
                    </div>
                    <h1 class="text-[clamp(1.8rem,4vw,3rem)] font-bold text-dark mb-4 text-shadow">欢迎，授权访问者</h1>
                    <p class="text-gray-600 text-lg max-w-3xl mx-auto">
                        既然你进入了这个页面，说明我非常重视你。这里包含了我的个人敏感信息，请勿传播。
                    </p>
                </div>

                <!-- 交互目录 -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                    <div class="bg-glass-blue rounded-xl p-6 card-shadow menu-item-hover cursor-pointer" onclick="showContent('academic')">
                        <div class="flex items-start">
                            <div class="flex-shrink-0 bg-primary/10 p-3 rounded-lg">
                                <i class="fa-solid fa-graduation-cap text-primary"></i>
                            </div>
                            <div class="ml-4">
                                <h3 class="text-lg font-semibold text-dark">学籍信息</h3>
                                <p class="mt-1 text-gray-600">查看和管理我的学籍档案、成绩记录和学习历程。</p>
                            </div>
                        </div>
                    </div>

                    <div class="bg-glass-blue rounded-xl p-6 card-shadow menu-item-hover cursor-pointer" onclick="showContent('interests')">
                        <div class="flex items-start">
                            <div class="flex-shrink-0 bg-primary/10 p-3 rounded-lg">
                                <i class="fa-solid fa-star text-primary"></i>
                            </div>
                            <div class="ml-4">
                                <h3 class="text-lg font-semibold text-dark">个人兴趣</h3>
                                <p class="mt-1 text-gray-600">管理我的兴趣爱好、收藏和个性化推荐设置。</p>
                            </div>
                        </div>
                    </div>

                    <div class="bg-glass-blue rounded-xl p-6 card-shadow menu-item-hover cursor-pointer" onclick="showContent('orientation')">
                        <div class="flex items-start">
                            <div class="flex-shrink-0 bg-primary/10 p-3 rounded-lg">
                                <i class="fa-solid fa-heart text-primary"></i>
                            </div>
                            <div class="ml-4">
                                <h3 class="text-lg font-semibold text-dark">性取向</h3>
                                <p class="mt-1 text-gray-600">管理我的性取向信息，这些信息将被严格保密。</p>
                            </div>
                        </div>
                    </div>

                    <div class="bg-glass-blue rounded-xl p-6 card-shadow menu-item-hover cursor-pointer" onclick="showContent('politics')">
                        <div class="flex items-start">
                            <div class="flex-shrink-0 bg-primary/10 p-3 rounded-lg">
                                <i class="fa-solid fa-landmark text-primary"></i>
                            </div>
                            <div class="ml-4">
                                <h3 class="text-lg font-semibold text-dark">政治立场</h3>
                                <p class="mt-1 text-gray-600">管理我的政治观点和立场信息，这些信息将被严格保密。</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="text-center">
                    <button id="logout-button" 
                        class="inline-flex items-center justify-center px-6 py-3 border border-gray-300 shadow-sm text-base font-medium rounded-lg text-gray-700 bg-glass btn-hover transition-all duration-200">
                        <i class="fa-solid fa-sign-out-alt mr-2"></i>
                        退出访问
                    </button>
                </div>
            </div>

            <!-- 内容展示区域 -->
            <div id="content-container" class="hidden transition-all duration-500">
                <div class="bg-glass-blue rounded-xl p-6 card-shadow">
                    <!-- 返回按钮移至左上角 -->
                    <div class="flex justify-between items-center mb-4">
                        <button id="back-button" class="text-primary hover:text-primary/80 transition-colors duration-200 flex items-center">
                            <i class="fa-solid fa-arrow-left mr-2"></i>返回
                        </button>
                        <button id="logout-button-content" 
                            class="inline-flex items-center justify-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-lg text-gray-700 bg-glass btn-hover transition-all duration-200">
                            <i class="fa-solid fa-sign-out-alt mr-1"></i>退出
                        </button>
                    </div>
                    <h1 id="content-title" class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-4 text-shadow text-center"></h1>
                    <div id="content-body"></div>
                </div>
            </div>
        </div>
    </section>

    <!-- 联系我们区域 -->
    <section id="contact" class="py-20">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-4">联系我们</h2>
                <p class="text-gray-600 max-w-3xl mx-auto">如有任何问题或建议，请通过以下方式与我们联系</p>
            </div>
            <div class="flex justify-center">
                <button id="open-message-form" class="w-full max-w-md flex justify-center py-3 px-4 border border-transparent rounded-lg bg-primary text-base font-medium text-white bg-gradient-custom btn-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                    <i class="fa-solid fa-paper-plane mr-2"></i>发送消息
                </button>
            </div>
            <!-- 发送消息表单（默认隐藏） -->
            <div id="message-form-container" class="hidden bg-glass-blue rounded-xl p-8 card-shadow mt-8">
                <div class="flex justify-between items-center mb-6">
                    <h3 class="text-xl font-semibold">发送消息</h3>
                    <button id="close-message-form" class="text-gray-500 hover:text-gray-700">
                        <i class="fa-solid fa-times"></i>
                    </button>
                </div>
                
                <form id="message-form" class="space-y-4">
                    <div>
                        <label for="name" class="block text-sm font-medium text-gray-700">姓名</label>
                        <input type="text" id="name" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring focus:ring-primary/30 focus:ring-opacity-50" placeholder="请输入您的姓名">
                    </div>
                    
                    <div>
                        <label for="email" class="block text-sm font-medium text-gray-700">电子邮箱</label>
                        <input type="email" id="email" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring focus:ring-primary/30 focus:ring-opacity-50" placeholder="请输入您的电子邮箱">
                    </div>
                    
                    <div>
                        <label for="message" class="block text-sm font-medium text-gray-700">消息内容</label>
                        <textarea id="message" rows="4" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring focus:ring-primary/30 focus:ring-opacity-50" placeholder="请输入您的消息内容"></textarea>
                    </div>
                    
                    <div class="pt-2">
                        <button type="button" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg bg-primary text-base font-medium text-white bg-gradient-custom btn-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                            发送消息
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-glass-blue border-t border-gray-200">
        <div class="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="flex items-center mb-4 md:mb-0">
                    <i class="fa-solid fa-shield-keyhole text-primary text-xl mr-2"></i>
                    <span class="font-bold text-lg text-dark">个人信息平台</span>
                </div>
                <div class="text-sm text-gray-500">
                    &copy; Fredi Co.,Ltd.    All Rights Reserved.
                </div>
            </div>
        </div>
    </footer>

    <!-- 错误提示模态框 -->
    <div id="error-modal" class="fixed inset-0 z-50 hidden">
        <div class="absolute inset-0 bg-black bg-opacity-30 backdrop-blur-sm"></div>
        <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full max-w-md">
            <div class="bg-glass-blue rounded-xl shadow-xl overflow-hidden transform transition-all">
                <div class="cat-border p-6">
                    <div class="text-center mb-4">
                        <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
                            <i class="fa-solid fa-exclamation-triangle text-red-500 text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-bold text-dark">密码错误</h3>
                    </div>
                    <p class="text-gray-600 text-center">您输入的用户名或密码不正确，请重试。</p>
                    <div class="mt-6 text-center">
                        <button id="close-error-modal" class="inline-flex items-center justify-center px-6 py-3 border border-gray-300 shadow-sm text-base font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary btn-hover">
                            关闭
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 邮件发送失败提示框 -->
    <div id="email-fail-modal" class="fixed inset-0 z-50 hidden">
        <div class="absolute inset-0 bg-black bg-opacity-30 backdrop-blur-sm"></div>
        <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full max-w-md">
            <div class="bg-glass-blue rounded-xl shadow-xl overflow-hidden transform transition-all">
                <div class="cat-border p-6">
                    <div class="text-center mb-4">
                        <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
                            <i class="fa-solid fa-exclamation-triangle text-red-500 text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-bold text-dark">邮件发送失败</h3>
                    </div>
                    <p class="text-gray-600 text-center">请检查您的邮件客户端设置或稍后再试。</p>
                    <div class="mt-6 text-center">
                        <button id="close-email-fail-modal" class="inline-flex items-center justify-center px-6 py-3 border border-gray-300 shadow-sm text-base font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary btn-hover">
                            关闭
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 邮件发送成功提示框 -->
    <div id="email-success-modal" class="fixed inset-0 z-50 hidden">
        <div class="absolute inset-0 bg-black bg-opacity-30 backdrop-blur-sm"></div>
        <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full max-w-md">
            <div class="bg-glass-blue rounded-xl shadow-xl overflow-hidden transform transition-all">
                <div class="cat-border p-6">
                    <div class="text-center mb-4">
                        <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                            <i class="fa-solid fa-check text-green-500 text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-bold text-dark">邮件发送成功</h3>
                    </div>
                    <p class="text-gray-600 text-center">感谢您的反馈！我们会尽快处理您的消息。</p>
                    <div class="mt-6 text-center">
                        <button id="close-email-success-modal" class="inline-flex items-center justify-center px-6 py-3 border border-gray-300 shadow-sm text-base font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary btn-hover">
                            关闭
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 加载动画 -->
    <div id="loading-overlay" class="fixed inset-0 bg-white bg-opacity-80 flex items-center justify-center z-50 hidden">
        <div class="text-center">
            <div class="inline-block animate-spin rounded-full h-12 w-12 border-4 border-primary border-t-transparent mb-4"></div>
            <p class="text-gray-700 font-medium">处理中，请稍候...</p>
        </div>
    </div>

    <script>
        // 获取DOM元素
        const usernameInput = document.getElementById('username');
        const passwordInput = document.getElementById('password');
        const togglePasswordBtn = document.getElementById('toggle-password');
        const loginForm = document.getElementById('login-form');
        const loginButton = document.getElementById('login-button');
        const logoutButton = document.getElementById('logout-button');
        const logoutButtonContent = document.getElementById('logout-button-content');
        const loginContainer = document.getElementById('login-container');
        const successContainer = document.getElementById('success-container');
        const contentContainer = document.getElementById('content-container');
        const contentTitle = document.getElementById('content-title');
        const contentBody = document.getElementById('content-body');
        const backButton = document.getElementById('back-button');
        const loadingOverlay = document.getElementById('loading-overlay');
        const mobileMenuButton = document.getElementById('mobile-menu-button');
        const mobileMenu = document.getElementById('mobile-menu');
        const navbar = document.getElementById('navbar');
        const errorModal = document.getElementById('error-modal');
        const closeErrorModal = document.getElementById('close-error-modal');
        const navLinks = document.querySelectorAll('.nav-link');
        const openMessageFormBtn = document.getElementById('open-message-form');
        const closeMessageFormBtn = document.getElementById('close-message-form');
        const messageFormContainer = document.getElementById('message-form-container');
        const animationModal = document.getElementById('animation-modal');
        const closeAnimationModal = document.getElementById('close-animation-modal');
        const emailFailModal = document.getElementById('email-fail-modal');
        const closeEmailFailModal = document.getElementById('close-email-fail-modal');
        const emailSuccessModal = document.getElementById('email-success-modal');
        const closeEmailSuccessModal = document.getElementById('close-email-success-modal');
        const messageForm = document.getElementById('message-form');
        const sendEmailButton = document.getElementById('send-email-button');

        // 预设用户名和密码
        const correctUsername = 'Denny';
        const correctPassword = '123';

        // 页面加载时显示动画弹窗
        window.addEventListener('load', () => {
            animationModal.classList.remove('hidden');
            setTimeout(() => {
                animationModal.classList.add('hidden');
            }, 5000);
        });

        // 关闭动画弹窗
        closeAnimationModal.addEventListener('click', () => {
            animationModal.classList.add('hidden');
        });

        // 密码显示/隐藏切换
        togglePasswordBtn.addEventListener('click', () => {
            const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
            passwordInput.setAttribute('type', type);
            
            // 切换图标
            const icon = togglePasswordBtn.querySelector('i');
            if (type === 'text') {
                icon.classList.remove('fa-eye-slash');
                icon.classList.add('fa-eye');
            } else {
                icon.classList.remove('fa-eye');
                icon.classList.add('fa-eye-slash');
            }
        });

        // 登录表单提交
        loginForm.addEventListener('submit', (e) => {
            e.preventDefault();
            
            // 显示加载动画
            loadingOverlay.classList.remove('hidden');
            
            // 模拟验证延迟
            setTimeout(() => {
                if (usernameInput.value === correctUsername && passwordInput.value === correctPassword) {
                    // 登录成功
                    loginContainer.classList.add('opacity-0');
                    
                    // 延迟隐藏登录表单并显示成功内容
                    setTimeout(() => {
                        loginContainer.classList.add('hidden');
                        successContainer.classList.remove('hidden');
                        successContainer.classList.add('opacity-0');
                        
                        // 触发重排
                        void successContainer.offsetWidth;
                        
                        successContainer.classList.remove('opacity-0');
                        loadingOverlay.classList.add('hidden');
                        
                        // 滚动到顶部
                        window.scrollTo({ top: 0, behavior: 'smooth' });
                    }, 500);
                } else {
                    // 登录失败
                    loadingOverlay.classList.add('hidden');
                    
                    // 显示错误模态框
                    errorModal.classList.remove('hidden');
                    
                    // 添加淡入动画
                    const modalContent = errorModal.querySelector('.bg-glass-blue');
                    modalContent.classList.add('animate-fade-in');
                    
                    // 0.5秒后添加抖动动画
                    setTimeout(() => {
                        modalContent.classList.add('animate-shake');
                        
                        // 动画结束后移除抖动类
                        setTimeout(() => {
                            modalContent.classList.remove('animate-shake');
                        }, 600);
                    }, 500);
                }
            }, 1500);
        });

        // 关闭错误模态框
        closeErrorModal.addEventListener('click', () => {
            errorModal.classList.add('hidden');
        });

        // 登出按钮
        logoutButton.addEventListener('click', logout);
        logoutButtonContent.addEventListener('click', logout);
        
        function logout() {
            // 显示加载动画
            loadingOverlay.classList.remove('hidden');
            
            // 隐藏成功内容
            successContainer.classList.add('opacity-0');
            contentContainer.classList.add('opacity-0');
            
            // 延迟显示登录表单
            setTimeout(() => {
                successContainer.classList.add('hidden');
                contentContainer.classList.add('hidden');
                loginContainer.classList.remove('hidden');
                loginContainer.classList.add('opacity-0');
                
                // 触发重排
                void loginContainer.offsetWidth;
                
                loginContainer.classList.remove('opacity-0');
                loadingOverlay.classList.add('hidden');
                
                // 清空密码
                passwordInput.value = '';
                
                // 滚动到顶部
                window.scrollTo({ top: 0, behavior: 'smooth' });
            }, 500);
        }

        // 返回目录按钮
        backButton.addEventListener('click', () => {
            // 隐藏内容区域
            contentContainer.classList.add('opacity-0');
            
            // 延迟显示目录
            setTimeout(() => {
                contentContainer.classList.add('hidden');
                successContainer.classList.remove('hidden');
                successContainer.classList.add('opacity-0');
                
                // 触发重排
                void successContainer.offsetWidth;
                
                successContainer.classList.remove('opacity-0');
                
                // 滚动到顶部
                window.scrollTo({ top: 0, behavior: 'smooth' });
            }, 500);
        });

        // 移动端菜单切换
        mobileMenuButton.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
        });

        // 导航栏滚动效果
        window.addEventListener('scroll', () => {
            if (window.scrollY > 10) {
                navbar.classList.add('shadow-md');
            } else {
                navbar.classList.remove('shadow-md');
            }
        });

        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                
                // 关闭移动端菜单
                if (!mobileMenu.classList.contains('hidden')) {
                    mobileMenu.classList.add('hidden');
                }
                
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                
                if (targetElement) {
                    // 计算目标位置（考虑导航栏高度）
                    const navbarHeight = navbar.offsetHeight;
                    const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - navbarHeight;
                    
                    // 平滑滚动
                    window.scrollTo({
                        top: targetPosition,
                        behavior: 'smooth'
                    });
                    
                    // 如果是登录后点击导航链接，隐藏内容区域
                    if (successContainer.classList.contains('opacity-0') === false) {
                        contentContainer.classList.add('hidden');
                        successContainer.classList.remove('hidden');
                    }
                }
            });
        });

        // 显示内容区域
        function showContent(type) {
            // 显示加载动画
            loadingOverlay.classList.remove('hidden');
            
            // 设置内容标题和内容
            let title, content;
            
            switch(type) {
                case 'academic':
                    title = '学籍信息';
                    content = `
                        <div class="space-y-4">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <h3 class="text-sm font-medium text-gray-500">姓名</h3>
                                    <p class="text-lg font-semibold">张三</p>
                                </div>
                                <div>
                                    <h3 class="text-sm font-medium text-gray-500">学号</h3>
                                    <!-- 这里可以继续添加学籍信息 -->
                                </div>
                            </div>
                        </div>
                    `;
                    break;
                case 'interests':
                    title = '个人兴趣';
                    content = `
                        <div class="space-y-4">
                            <!-- 这里可以添加个人兴趣相关内容 -->
                        </div>
                    `;
                    break;
                case 'orientation':
                    title = '性取向';
                    content = `
                        <div class="space-y-4">
                            <!-- 这里可以添加性取向相关内容 -->
                        </div>
                    `;
                    break;
                case 'politics':
                    title = '政治立场';
                    content = `
                        <div class="space-y-4">
                            <!-- 这里可以添加政治立场相关内容 -->
                        </div>
                    `;
                    break;
            }

            contentTitle.textContent = title;
            contentBody.innerHTML = content;

            // 隐藏成功内容
            successContainer.classList.add('opacity-0');
            setTimeout(() => {
                successContainer.classList.add('hidden');
                contentContainer.classList.remove('hidden');
                contentContainer.classList.add('opacity-0');
                void contentContainer.offsetWidth;
                contentContainer.classList.remove('opacity-0');
                loadingOverlay.classList.add('hidden');
            }, 500);
        }

// 打开消息表单
openMessageFormBtn.addEventListener('click', () => {
    messageFormContainer.classList.remove('hidden');
});

// 关闭消息表单
closeMessageFormBtn.addEventListener('click', () => {
    messageFormContainer.classList.add('hidden');
});

// 使用mailto协议发送邮件
sendEmailButton.addEventListener('click', (e) => {
    event.preventDefault();
    
    const name = document.getElementById('name').value;
    const email = document.getElementById('email').value;
    const message = document.getElementById('message').value;
    
    // 验证必填字段
    if (!name || !email || !message) {
        alert('请填写所有必填字段');
        return;
    }
    
    // 显示加载状态
    showProgress('正在准备邮件...');
    
    // 构建邮件内容
    const subject = `来自${name}的消息`;
    const body = `发件人: ${name}\n邮箱: ${email}\n\n消息内容:\n${message}`;
    
    // 目标邮箱地址（示例邮箱）
    const to = 'example@example.com';
    
    // 构建mailto链接
    const mailtoLink = `mailto:${to}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
    
    console.log('尝试打开邮件客户端:', mailtoLink); // 用于调试
    
    // 创建一个计时器来检测邮件客户端是否打开
    let mailClientOpened = false;
    let timeoutId;
    
    // 尝试打开邮件客户端
    try {
        showProgress('正在尝试打开邮件客户端...');
        
        // 保存当前时间
        const startTime = Date.now();
        
        // 打开邮件客户端
        window.location.href = mailtoLink;
        
        // 标记邮件客户端已尝试打开
        mailClientOpened = true;
        
        // 更新进度
        showProgress('邮件客户端已启动，请检查...');
        
        // 设置超时检测
        timeoutId = setTimeout(() => {
            // 如果超时后还没有确认结果，显示超时提示
            if (!mailClientOpened) {
                showProgress('连接邮件客户端超时，可能未安装或配置邮件客户端');
                setTimeout(() => {
                    emailFailModal.classList.remove('hidden');
                    hideProgress();
                }, 1000);
            }
        }, 8000); // 8秒超时
        
        // 监听页面可见性变化，判断用户是否返回页面
        document.addEventListener('visibilitychange', handleVisibilityChange);
        
        function handleVisibilityChange() {
            if (document.visibilityState === 'visible' && mailClientOpened) {
                // 用户返回页面，说明可能已处理邮件
                clearTimeout(timeoutId);
                document.removeEventListener('visibilitychange', handleVisibilityChange);
                
                // 延迟显示成功消息，给用户一些时间切换回页面
                setTimeout(() => {
                    showProgress('邮件已准备好，请检查您的邮件客户端');
                    setTimeout(() => {
                        emailSuccessModal.classList.remove('hidden');
                        hideProgress();
                    }, 1500);
                }, 1000);
            }
        }
        
    } catch (error) {
        console.error('打开邮件客户端失败:', error);
        clearTimeout(timeoutId);
        showProgress('打开邮件客户端失败，请检查您的设置');
        
        setTimeout(() => {
            emailFailModal.classList.remove('hidden');
            hideProgress();
        }, 1500);
    }
});

// 显示进度提示
function showProgress(message) {
    // 创建进度提示元素
    const progressContainer = document.createElement('div');
    progressContainer.id = 'email-progress-container';
    progressContainer.className = 'fixed inset-0 z-50 flex flex-col items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm';
    
    const progressCard = document.createElement('div');
    progressCard.className = 'bg-white rounded-xl p-6 shadow-2xl max-w-md w-full mx-4';
    
    const progressIcon = document.createElement('div');
    progressIcon.className = 'w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4';
    progressIcon.innerHTML = '<i class="fa-solid fa-envelope-open-text text-primary text-2xl"></i>';
    
    const progressTitle = document.createElement('h3');
    progressTitle.className = 'text-xl font-bold text-dark mb-2 text-center';
    progressTitle.textContent = '邮件发送进度';
    
    const progressMessage = document.createElement('p');
    progressMessage.id = 'email-progress-message';
    progressMessage.className = 'text-gray-600 text-center mb-4';
    progressMessage.textContent = message;
    
    const progressBarContainer = document.createElement('div');
    progressBarContainer.className = 'w-full bg-gray-200 rounded-full h-2.5 mb-4';
    
    const progressBar = document.createElement('div');
    progressBar.id = 'email-progress-bar';
    progressBar.className = 'bg-primary h-2.5 rounded-full transition-all duration-300';
    progressBar.style.width = '30%';
    
    progressBarContainer.appendChild(progressBar);
    progressCard.appendChild(progressIcon);
    progressCard.appendChild(progressTitle);
    progressCard.appendChild(progressMessage);
    progressCard.appendChild(progressBarContainer);
    progressContainer.appendChild(progressCard);
    
    // 添加到页面
    document.body.appendChild(progressContainer);
    
    // 动画进度条
    setTimeout(() => {
        progressBar.style.width = '70%';
    }, 1000);
    
    setTimeout(() => {
        progressBar.style.width = '90%';
    }, 3000);
}

// 隐藏进度提示
function hideProgress() {
    const progressContainer = document.getElementById('email-progress-container');
    if (progressContainer) {
        // 添加淡出动画
        progressContainer.classList.add('opacity-0', 'transition-opacity', 'duration-500');
        setTimeout(() => {
            document.body.removeChild(progressContainer);
        }, 500);
    }
}

// 关闭邮件发送失败提示框
closeEmailFailModal.addEventListener('click', () => {
    emailFailModal.classList.add('hidden');
});

// 关闭邮件发送成功提示框 - 只有用户确认后才重置表单
closeEmailSuccessModal.addEventListener('click', () => {
    emailSuccessModal.classList.add('hidden');
    
    // 延迟重置表单，给用户一些时间查看结果
    setTimeout(() => {
        messageForm.reset();
        messageFormContainer.classList.add('hidden');
    }, 500);
});// 关闭邮件发送失败提示框
closeEmailFailModal.addEventListener('click', () => {
    emailFailModal.classList.add('hidden');
});

// 关闭邮件发送成功提示框
closeEmailSuccessModal.addEventListener('click', () => {
    emailSuccessModal.classList.add('hidden');
});


// 添加事件监听器（确保在 DOMContentLoaded 中）
document.addEventListener('DOMContentLoaded', () => {
    console.log('DOM 加载完成，开始绑定事件');

    if (!sendEmailButton) {
        console.error('未找到发送按钮');
        return;
    }

    sendEmailButton.addEventListener('click', (e) => {
        e.preventDefault();
        console.log('点击事件触发'); // 关键检测点

        // 验证表单字段
        const name = document.getElementById('name').value.trim();
        const email = document.getElementById('email').value.trim();
        const message = document.getElementById('message').value.trim();

        if (!name || !email || !message) {
            console.log('验证失败：必填字段为空');
            alert('请填写所有必填字段');
            return;
        }

        // 显示加载动画
        showProgress('正在准备邮件...');
        
        // 模拟发送邮件（实际项目中替换为真实 API 请求）
        setTimeout(() => {
            hideProgress();
            showSuccessModal();
        }, 2000);
    });
});
    </script>
</body>
</html>